<style lang="less" scoped>
.prehospital-summary {
  width: 100%;
  height: 100%;

  &_content {
    height: calc(100% - 59px);
    overflow-y: auto;
  }

  .transferred-hospital {
    height: 400px;
  }

  .box-card+.box-card {
    margin-top: 5px;
  }

  /deep/.el-radio__label {
    line-height: 38px;
  }
}
</style>

<template>
  <div class="prehospital-summary">
    <!-- <el-form inline>
      <el-radio v-model="radioDate" label="1" @change="changeDate">
        <span style="margin-right: 5px;">指定日期</span>
        <el-form-item label="年份：">
          <el-date-picker
            v-model="year"
            type="year"
            value-format="yyyy"
            size="mini"
            :disabled="radioDate == 2"
            placeholder="选择年"
          />
        </el-form-item>
        <el-form-item label="季度：">
          <el-select v-model="quarter" size="mini" placeholder="请选择" :disabled="radioDate == 2">
            <el-option label="第一季度" :value="1" />
            <el-option label="第二季度" :value="2" />
            <el-option label="第三季度" :value="3" />
            <el-option label="第四季度" :value="4" />
          </el-select>
        </el-form-item>
        <el-form-item label="月份：">
          <el-select v-model="month" size="mini" placeholder="请选择" :disabled="radioDate == 2">
            <el-option label="一月" :value="1" :disabled="quarter != '' && quarter != '1'" />
            <el-option label="二月" :value="2" :disabled="quarter != '' && quarter != '1'" />
            <el-option label="三月" :value="3" :disabled="quarter != '' && quarter != '1'" />
            <el-option label="四月" :value="4" :disabled="quarter != '' && quarter != '2'" />
            <el-option label="五月" :value="5" :disabled="quarter != '' && quarter != '2'" />
            <el-option label="六月" :value="6" :disabled="quarter != '' && quarter != '2'" />
            <el-option label="七月" :value="7" :disabled="quarter != '' && quarter != '3'" />
            <el-option label="八月" :value="8" :disabled="quarter != '' && quarter != '3'" />
            <el-option label="九月" :value="9" :disabled="quarter != '' && quarter != '3'" />
            <el-option label="十月" :value="10" :disabled="quarter != '' && quarter != '4'" />
            <el-option label="十一月" :value="11" :disabled="quarter != '' && quarter != '4'" />
            <el-option label="十二月" :value="12" :disabled="quarter != '' && quarter != '4'" />
          </el-select>
        </el-form-item>
      </el-radio>
      <el-radio v-model="radioDate" label="2" @change="changeDate">
        <span style="margin-right: 5px;">其他时间</span>
        <el-form-item label="">
          <el-date-picker
            v-model="monthRange"
            type="monthrange"
            start-placeholder="开始月份"
            end-placeholder="结束月份"
            size="mini"
            format="yyyy-MM"
            value-format="yyyy-MM"
            :disabled="radioDate == 1"
          />
        </el-form-item>
      </el-radio>
      <el-form-item label="">
        <el-button type="primary" size="mini" @click="search">搜索</el-button>
        <el-button size="mini" @click="reset">重置</el-button>
        <el-button type="primary" size="mini" @click="exportPPt">导出质控报告</el-button>
      </el-form-item>
    </el-form> -->
    <div class="prehospital-summary_content">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>全院转院病例统计</span>
          <el-popover placement="bottom" title="说明" width="400" trigger="hover" style="margin-left: 5px;">
            <div>考核对象：</div>
            <div>转诊病例</div>
            <div>数据取值：</div>
            <div>1.总数=转入+转出</div>
            <div>2.转入/总数=转入占比</div>
            <div>3.转出/总数=转出占比</div>
            <div>4.按月统计，1个病例计1例，无重复计算</div>
            <div>查询筛选：</div>
            <div>时间、全院</div>
            <i slot="reference" class="el-icon-info" style="color: #42cece;" />
          </el-popover>
        </div>
        <div id="transferred-hospital" class="transferred-hospital" />
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>全院转院病例来源统计</span>
          <el-popover placement="bottom" title="说明" width="400" trigger="hover" style="margin-left: 5px;">
            <div>考核对象：</div>
            <div>转入本院的病例</div>
            <div>数据取值：</div>
            <div>1.取“转院类型”所填写的医院名称</div>
            <div>2.总数=各医院转入病例总数</div>
            <div>3.该医院转入病例数量/总数=该医院转入占比</div>
            <div>4.按填写过的医院名称分类统计，未填写计入“未知”</div>
            <div>5.按月统计，1个病例计1例，无重复计算</div>
            <div>查询筛选：</div>
            <div>时间、全院</div>
            <i slot="reference" class="el-icon-info" style="color: #42cece;" />
          </el-popover>
        </div>
        <el-table :data="tableInData" height="500px" border style="width: 100%">
          <el-table-column prop="patientName" align="center" label="时间范围">
            <template slot-scope="scope">
              {{ scope.row.year + '-' + scope.row.month }}
            </template>
          </el-table-column>
          <el-table-column prop="hospitalName" align="center" label="医院名称" />
          <el-table-column prop="transferInNum" align="center" label="转入病例数量(例)" />
          <el-table-column prop="transferPercentage" align="center" label="占比(%)" />
        </el-table>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>全院转院病例去向统计</span>
          <el-popover placement="bottom" title="说明" width="400" trigger="hover" style="margin-left: 5px;">
            <div>考核对象：</div>
            <div>转出本院的病例</div>
            <div>数据取值：</div>
            <div>1.取“出院信息”所填写的医院名称</div>
            <div>2.总数=转出至各医院的病例总数；</div>
            <div>3.转出至该医院病例数量/总数=转出至该医院占比</div>
            <div>4.按填写过的医院名称分类统计，未填写计入“未知”</div>
            <div>5.按月统计，1个病例计1例，无重复计算</div>
            <div>查询筛选：</div>
            <div>时间、全院</div>
            <i slot="reference" class="el-icon-info" style="color: #42cece;" />
          </el-popover>
        </div>
        <el-table :data="tableOutData" height="500px" border style="width: 100%">
          <el-table-column prop="patientName" align="center" label="时间范围">
            <template slot-scope="scope">
              {{ scope.row.year + '-' + scope.row.month }}
            </template>
          </el-table-column>
          <el-table-column prop="hospitalName" align="center" label="医院名称" />
          <el-table-column prop="transferOutNum" align="center" label="转出病例数量(例)" />
          <el-table-column prop="transferPercentage" align="center" label="占比(%)" />
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import {
  getHospitalTransfer,
  getTransferInNums,
  getTransferOutNums
} from '@/api/statistical/chest-pain'

export default {
  props: ['preYear', 'preQuarter', 'preMonth', 'preMonthRange'],
  data() {
    const _this = this
    return {
      year: '',
      quarter: '',
      month: '',
      monthRange: [],
      tableInData: [],
      tableOutData: []
    }
  },
  mounted() {},
  methods: {
    reset() {
      this.search()
    },
    search() {
      this.year = this.preYear
      this.quarter = this.preQuarter
      this.month = this.preMonth
      this.monthRange = this.preMonthRange
      this.getTransferred()
      this.getTransferredCasesIn()
      this.getTransferredCasesOut()
    },
    getTransferred() {
      const transferredHospital = document.getElementById('transferred-hospital')
      const myChart = echarts.init(transferredHospital)
      myChart.clear()
      myChart.hideLoading()
      window.addEventListener('resize', myChart.resize)
      getHospitalTransfer({
        hospitalId: this.$store.getters.hospitalId,
        year: this.year,
        quarter: this.quarter,
        month: this.month,
        startTime: this.monthRange[0] ? this.monthRange[0] : '',
        endTime: this.monthRange[1] ? this.monthRange[1] : ''
      }).then(res => {
        if (res.code == 0) {
          if (res.data) {
            const timeLine = []
            const transferInList = []
            const transferOutList = []
            const transferInOutList = []
            if (res.data.transferInOutNumList && res.data.transferInOutNumList.length > 0) {
              res.data.transferInOutNumList.forEach(el => {
                const timeData = el.year + '-' + el.month
                timeLine.push(timeData)
                transferInList.push(el.transferInNum ? el.transferInNum : 0)
                transferOutList.push(el.transferOutNum ? el.transferOutNum : 0)
                transferInOutList.push(el.transferInOutNum ? el.transferInOutNum : 0)
              })

              // this.dataAll.qyzybltj.labels = timeLine
              // console.log(this.dataAll.qyzybltj.labels, 'this.dataAll.qyzybltj.labels')
              // this.dataAll.qyzybltj.data1[0].values = transferInOutList
              // this.dataAll.qyzybltj.data1[0].labels = this.dataAll.qyzybltj.labels
              // this.dataAll.qyzybltj.data2[0].values = transferInList
              // this.dataAll.qyzybltj.data2[0].labels = this.dataAll.qyzybltj.labels
              // this.dataAll.qyzybltj.data2[1].values = transferOutList
              // this.dataAll.qyzybltj.data2[1].labels = this.dataAll.qyzybltj.labels

              const option = {
                color: ['#027DB4', '#F59A23', '#D9001BA1'],
                tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                    type: 'shadow'
                  }
                },
                legend: {
                  // orient: 'vertical',
                  // right: 0,
                  // top: '50px',
                  formatter: name => {
                    if (name == '转院病人总数') {
                      return name + '：' + (res.data.totalTransfer ? res.data.totalTransfer : 0) + '例'
                    }
                    if (name == '外院转入总数') {
                      return name + '：' + (res.data.subtotalTransferIn ? res.data.subtotalTransferIn : 0) + '例' + ' ' + (res.data.percentTransferIn ? res.data.percentTransferIn : 0) + '%'
                    }
                    if (name == '本院转出总数') {
                      return name + '：' + (res.data.subtotalTransferOut ? res.data.subtotalTransferOut : 0) + '例' + ' ' + (res.data.percentTransferOut ? res.data.percentTransferOut : 0) + '%'
                    }
                  }
                },
                xAxis: {
                  type: 'category',
                  axisTick: {
                    alignWithLabel: true
                  },
                  data: timeLine
                },
                yAxis: {
                  name: '例',
                  type: 'value'
                },
                series: [{
                  name: '转院病人总数',
                  type: 'bar',
                  barWidth: 20,
                  label: {
                    show: true,
                    position: 'top'
                  },
                  data: transferInOutList
                }, {
                  name: '外院转入总数',
                  type: 'bar',
                  barWidth: 20,
                  label: {
                    show: true,
                    position: 'top'
                  },
                  data: transferInList
                }, {
                  name: '本院转出总数',
                  type: 'bar',
                  barWidth: 20,
                  label: {
                    show: true,
                    position: 'top'
                  },
                  data: transferOutList
                }]
              }
              myChart.setOption(option)
            } else {
              myChart.showLoading({
                text: '暂无数据',
                fontSize: 18,
                left: 'center',
                color: 'transparent', // loading颜色，设置成透明或白色，不然会显示loading状态
                textColor: '#000', // 文字颜色
                maskColor: 'rgba(255, 255, 255, 0)' // 背景色
              })
            }
          }
        } else {
          myChart.showLoading({
            text: '暂无数据',
            fontSize: 18,
            left: 'center',
            color: 'transparent', // loading颜色，设置成透明或白色，不然会显示loading状态
            textColor: '#000', // 文字颜色
            maskColor: 'rgba(255, 255, 255, 0)' // 背景色
          })
        }
      })
    },
    getTransferredCasesIn() {
      this.tableInData = []
      getTransferInNums({
        hospitalId: this.$store.getters.hospitalId,
        year: this.year,
        quarter: this.quarter,
        month: this.month,
        startTime: this.monthRange[0] ? this.monthRange[0] : '',
        endTime: this.monthRange[1] ? this.monthRange[1] : ''
      }).then(res => {
        if (res.code == 0) {
          if (res.data) {
            if (res.data.transferInHospitalNums && res.data.transferInHospitalNums.length > 0) {
              this.tableInData = res.data.transferInHospitalNums
            }
          }
        }
      })
    },
    getTransferredCasesOut() {
      this.tableOutData = []
      getTransferOutNums({
        hospitalId: this.$store.getters.hospitalId,
        year: this.year,
        quarter: this.quarter,
        month: this.month,
        startTime: this.monthRange[0] ? this.monthRange[0] : '',
        endTime: this.monthRange[1] ? this.monthRange[1] : ''
      }).then(res => {
        if (res.code == 0) {
          if (res.data) {
            if (res.data.transferOutHospitalNums && res.data.transferOutHospitalNums.length > 0) {
              this.tableOutData = res.data.transferOutHospitalNums
            }
          }
        }
      })
    }
  }
}
</script>
